import React from 'react'
import { Image, Typography } from "antd";
import { withRouter, RouteComponentProps, Link} from 'react-router-dom'

interface PropsTypes extends RouteComponentProps{
  id: string | number;
  size: "large" | "small";
  imageSrc: string;
  price: number | string;
  title: string;
}
const ProductImageComponent:React.FC<PropsTypes> = ({id, size, imageSrc, price, title}) =>{
  return (
    <>
      {size === "large" ? (
        <Image src={imageSrc} height={285} width={490} />
        ) : (
          <Image src={imageSrc} height={120} width={240} />
        )}
      <Link to={`details/${id}`}>
        <div>
          <Typography.Text type="secondary" style={{cursor: "pointer"}}>
            {title.slice(0, 25)}
          </Typography.Text>
          <Typography.Text type="danger" strong>
            ¥ {price} 起
          </Typography.Text>
        </div>
      </Link>
    </>
  )
}

export const ProductImage = withRouter(ProductImageComponent)